<script>
import GoodsItem from "@/components/GoodsItem.vue"
import {getProductListApi} from "@/api/product"
import BtnSearchInput from "@/components/BtnSearchInput.vue"
import {mapMutations} from "vuex"
import SafeBox from "@/components/SafeBox.vue"

export default {
  name: "SearchList",
  components: {SafeBox, BtnSearchInput, GoodsItem},
  data() {
    return {
      // 输入框内容会修改，searchInput 是和 input 框双向绑定的，所以不用computed
      searchInput: '',
      categoryId: '',
      page: 1,
      productList: [],
      navList: ['综合', '销量', '价格'],
      activeName: '综合',
    }
  },
  onLoad(options) {
    // 获得路由参数
    this.searchInput = options.search
    this.categoryId = options.categoryId
    // 不管是从分类页还是搜索页，最终都是跳转到搜索列表页，直接在搜索列表页搜集历史记录就行
    this.SET_HISTORY(this.searchInput) // 把 searchInput 内容存入历史记录

    // searchInput 得到后，就可以请求商品列表了
    const obj = this.sort(this.activeName)
    this.getProductList(obj)
  },
  methods: {
    ...mapMutations('user', ['REMOVE_HISTORY', 'SET_HISTORY']), // 清空历史记录 和 设置历史记录 的方法

    // 返回一个选择哪种类型排序的对象
    sort(type) {
      // 使用一个对象来映射 type 到对应的排序对象
      const sortOptions = {
        '综合': {sortType: 'all'}, // 综合排序
        '销量': {sortType: 'sales', sortPrice: 0}, // 销量从低到高排序
        '价格': {sortType: 'price'} // 价格从低到高排序
      }

      // 返回对应的排序对象，如果没有匹配则返回一个空对象，其实就是要携带的请求参数
      return sortOptions[type] || {}
    },

    // 根据不同排序类型请求获得商品列表
    async getProductList(obj) {

      const res = await getProductListApi({
        goodsName: this.searchInput, // 商品名称
        page: this.page, // 页数
        categoryId: this.categoryId, // 分类id
        ...obj
      })

      this.productList = res.data.list.data
    },

    // BtnSearchInput 组件的按钮方法
    searchBtnFun() {
      const obj = this.sort(this.activeName) // 获取排序对象
      this.getProductList(obj) // 请求商品列表

      // 点击按钮相当于在搜索列表页再次搜索
      this.SET_HISTORY(this.searchInput) // 把 searchInput 内容存入历史记录
    },
  },
  watch: {
    activeName: {
      handler(newVal) {
        const obj = this.sort(newVal)
        this.getProductList(obj)
      }
    }
  },
  // 分享给朋友
  onShareAppMessage() {
    return {
      title: '智慧商城',
      path: `/pages/SearchList/SearchList?search=${this.searchInput}`
    }
  },
  // 分享到朋友圈
  onShareTimeline() {
  },
}
</script>

<template>
  <div class="search">
    <!--placeholder 固定在顶部时，在标签位置生成一个等高的占位元素-->
    <van-nav-bar
        fixed
        title="商品列表"
        left-arrow
        @click-left="uni.navigateBack"
        placeholder
    />

    <!--搜索框-->
    <!-- btnFun 方法传入的参数是 btnFunParams ,是一个数组,而且 v-model 必传，这样才可以绑定数据和 input 框-->
    <BtnSearchInput @btn-fun="searchBtnFun" v-model="searchInput"></BtnSearchInput>

    <!-- 排序选项按钮 -->
    <div class="sort-btns">
      <div
          v-for="item in navList"
          :key="item"
          @click="activeName = item"
          class="sort-item"
          :class="{active:activeName === item}"
      >
        {{ item }}
      </div>
    </div>

    <div class="goods-list">
      <GoodsItem v-for="item in productList" :key="item.goods_id" :item="item"></GoodsItem>
    </div>

    <SafeBox></SafeBox>
  </div>
</template>

<style lang="less">
.search {

  .sort-btns {
    display: flex;
    height: 36px;
    line-height: 36px;

    .sort-item {
      text-align: center;
      flex: 1;
      font-size: 16px;
    }

    .active {
      color: red;
    }
  }
}

.goods-list {
  background-color: #f6f6f6;
}
</style>
